<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../css/responsive.css?v=2025">
    <link rel="stylesheet" href="../element/theme-default/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">-->
    <script type="text/javascript">
        document.write("<link rel='stylesheet' href='../css/index.css?v=" + Math.random() + "'>");
    </script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../element/index.js"></script>
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <!--[if lt IE 9]>
    <script src="../js/html5shiv.min.js"></script>
    <script src="../js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="wrap" v-cloak v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在加载中，请稍后！">
    <div class="add_box">
        <span>每日行程轨迹验证</span>
    </div>
	<div class="search_box">
		<!--检索部分-->
		<el-form :inline="true"  :model="navForm" class="demo-form-inline">
			<el-form-item label="设备编号:">
				<el-input v-model="navForm.search" placeholder="请输入设备编号" clearable></el-input>
			</el-form-item>
			<el-form-item label="行驶时间:" class="dateBox">
			    <el-col :span="11">
			        <el-date-picker
			                placeholder="请选择日期"
			                v-model="navForm.startTime"
			                type="date"
			                value-format="yyyy-MM-dd"
			                style="width: 100%;">
			        </el-date-picker>
			    </el-col>
			    <el-col class="line" style="text-align: center;" :span="2">至</el-col>
			    <el-col :span="11">
			        <el-date-picker
			                placeholder="请选择日期"
			                v-model="navForm.endTime"
			                type="date"
			                value-format="yyyy-MM-dd"
			                style="width: 100%;">
			        </el-date-picker>
			    </el-col>
			</el-form-item>
			<el-form-item>
				<el-button-group>
				  <el-button type="success" size="small" @click="selectDate('today')">今天</el-button>
				  <el-button type="success" size="small" @click="selectDate('7')" >近一周</el-button>
				  <el-button type="success" size="small" @click="selectDate('30')" >近一月</el-button>
				</el-button-group>
				<el-button type="primary" @click="searchTable" style="margin-left: 0.2rem;">查询</el-button>
			</el-form-item>
		</el-form>
	</div>
    <div class="table_box">
        <!--table表格部分-->
        <el-table
                ref="multipleTable"
                :data="tableData"
                style="width: 100%"
                >
            <!-- <el-table-column prop="vehicleNo" label="车牌号" ></el-table-column> -->
            <el-table-column prop="equipmentNo" label="设备编号" ></el-table-column>
            <el-table-column prop="dateDay" label="日期" ></el-table-column>
            <el-table-column prop="totalMiles" label="行驶总距离（km）" ></el-table-column>
            <el-table-column prop="totalHours" label="行驶总时长（h）" ></el-table-column>
            <el-table-column prop="totalNum" label="行驶次数" ></el-table-column>
            <el-table-column label="轨迹" >
				<template slot-scope="scope">
				    <el-button size="mini" type="primary" @click="openNewPage(scope.row)">回放</el-button>
				</template>
			</el-table-column>
        </el-table>
        <!--分页部分-->
        <el-pagination
                style="margin-top:0.2rem;"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="currentPage"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20]"
                :page-size="10"
                :total="totalPage">
        </el-pagination>
    </div>
</div>
<!--<script src="../js/prototype.js?v=2229"></script>-->

<script type="text/javascript">
    document.write("<script type='text/javascript' src='../js/prototype.js?v=" + Math.random() + "'><\/script>");
</script>
<script>
    var myControl=new Vue({
        el:".wrap",
        data:{
			rid:'',
            fullscreenLoading:false,
			detailPageVisible:false,
            formType:"",               //页面类型
            navForm:{           //储存搜索框的检索条件信息
                startTime:'',
                endTime:'',
                search:'',
            },
			modeForm:{
				name:""
			},
			currentPage:1,      //当前页
			pageSize:10,      //一页多少条数据
			totalPage:1,         //总页数tableData:[],
            tableData:[]
        },
        methods:{
            getData:function(){
                this.getTbodyData();
            },
			//选择日期
			selectDate(sign){
				const start = new Date();
				const end = new Date();
				if(sign=='today'){
					this.navForm.startTime=dateFormatting(start,'yyyy-MM-dd');
					this.navForm.endTime=dateFormatting(end,'yyyy-MM-dd');
				}else{
					this.navForm.startTime=dateFormatting(new Date(start.getTime() - 3600 * 1000 * 24 * sign),'yyyy-MM-dd');
					this.navForm.endTime=dateFormatting(end,'yyyy-MM-dd');
				}
			},
            //点击查询
            searchTable(){
                this.currentPage=1;
                this.getTbodyData();
            },
            //点击查看权限按钮
            openNewPage:function(row){
				var startTime=row.dateDay+" 00:00:00";
				var endTime=row.dateDay+" 23:59:59";
				window.open('map_validation.html?plateNum='+row.equipmentNo+'&startTime='+startTime+'&endTime='+endTime);
            },
            //获取tbody里的数据
            getTbodyData:function(){
                var _this=this;
                _this.tableData=[];//  清空table的值
                var json=JSON.parse(JSON.stringify(this.navForm));
                json.pageNum=_this.currentPage;
                json.pageSize=_this.pageSize;
                $.ajax({
                    type: 'get',   //POST/PUT/DELETE/HEAD...
                    url:globalUrl+"/cloud/getTTripMilesStaticsList",
                    // beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
                    data:json,
                    dataType: 'json',	//text/script/xml/json/jsonp
                    // contentType:"application/json; charset=UTF-8",
                    success: function (data) {
                       _this.tableData=data.data.list;
                       _this.totalPage=parseInt(data.data.total);
                    }
                });
            },
            //分页数据多少条change
            handleSizeChange(val){
                this.pageSize=val;
                this.getTbodyData();
            },
            //分页：当前页改变之后的函数
            handleCurrentChange:function(val){
                // console.log(val);
                this.currentPage=Number(val);
                this.getTbodyData(this.activityState);
            },
        },
        mounted:function(){
            this.getData();
        }
    });
    window.onstorage=function(e){
        // console.log(e.key);
        if(e.key=="orderState"){
            myControl.currentPage=1;
            myControl.getTbodyData();
        }
    };

</script>
</body>
</html>